<template>
  <div class="container">
    <el-button type="danger">批量删除</el-button>
    <el-table :data="tableDate" border style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="#" width="80"> </el-table-column>
      <el-table-column prop="loginName" label="用户名" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="age" label="年龄" width="107"> </el-table-column>
      <el-table-column prop="gender" label="性别" width="130">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="180">
      </el-table-column>
      <el-table-column label="操作" width="350">
        <template slot-scope="scope">
          <el-button type="warning" round>设置未审核</el-button>
          <el-button type="danger" round @click="onDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.currentPage"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="pages.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      tableDate: [],
    };
  },
  layout: "main",
  async fetch({ $axios, store }) {
    const { data } = await $axios.get(
      "http://localhost:3001/users/user-list?pageSize=10&currentPage=1"
    );
    store.commit("user/GetTOTAL", data.total);
    store.commit("user/LIST_ADD", data.data);
  },
  methods: {
    handlStatus(dt) {
      return dt == 1 ? "已审核" : "未审核";
    },
    handleCurrentChange(val) {
      console.log(val);
    },
    handleSizeChange(val) {
      console.log(val);
    },
    ...mapActions("user", ["onDelete"]),
  },
  mounted() {
    this.tableDate = this.users.map((v) => {
      return { ...v, status: this.handlStatus(v.status) };
    });
  },
  computed: {
    ...mapState("user", ["users", "pages", "total"]),
  },
};
</script>

<style>
</style>
